<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>糖桔丫的作品集</title>
    <link href="./bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./main.css">
    <style>
        h2{
              font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
              width:200px;
              border-bottom: 1px solid;
              padding-bottom:0.2em ;
              font-weight: bolder;
          }   
         h3{
           color: rgb(255, 255, 255);
           background-color:rgb(255, 205, 41) ;
           text-align: center;
         }
          a{
              text-decoration: none;color:rgb(0, 34, 40);
          }
          a:hover{
              text-decoration: underline; color: rgb(255, 187, 0);      }
              .gray{ 
                  text-align: center;
                  color: rgb(31, 30, 31);
                  width:200px;
                  border: pink 2px  solid;
                   
              }
              .bg{
                background-color: rgb(255, 150, 128);
                text-align: center;
               }
               .ved{
                 text-align: center;
                 background-color: black;
               }
              p{
                  color: rgb(31, 30, 31) ;
                }
                #head {
    border:1px  rgb(0, 34,40) solid;
    width:420px;
    height:auto;
    margin-bottom:10px;
}
#main {
    border:1px rgb(0, 34,40) solid;
    width:400px;
    /*height:200px;*/
    margin-bottom:10px;
    padding:5px;
    overflow: hidden;
}


                #left {
    border:2px rgb(0, 34,40) solid;
    widows: 300px;
    height:auto;
    width: 400px;
    float: left;
}
#right {
    border:1px #CCC solid;
    width:193px;
    height:198px;
    margin-right:5px;
    float: right;
}
.jc{
  text-shadow: cornflowerblue;
  border: 2px rgb(0, 34,40) solid;
  width: 400px;
  height: 300px;
  text-align: center;
}
              
      </style>
  </head>
  
  <body>
    <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-warning">
      <div class="container">
          <a class="navbar-brand" href="#"><img src="./1.jpg" alt="糖桔丫的作品集"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="https://gitee.com/tangtyl/tangju.git ">糖桔丫的裤兜儿 <span class="sr-only">(current)</span></a>
                </li>

              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                      <a class="nav-link" href="./index.html">糖桔丫 <span class="sr-only">(current)</span></a>
                    </li>
  
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  作品集
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <div class="dropdown-divider">   
                  </div><a class="dropdown-item" href="../期末/媒体/cha.html">策划作品集</a>
                  <a class="dropdown-item" href="./媒体/pm.html">平面作品集</a>
                  <a class="dropdown-item" href="./媒体/sy.html">摄影作品集</a>
                  <a class="dropdown-item" href="./媒体/wa.html">文案作品集</a>
                  <a class="dropdown-item" href="./媒体/sh.html">手绘作品集</a>
                </div></div>
              </li>
            </ul>

            
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="糖桔丫" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
      </div>
    </nav></header>
    <section id="slide"><div id="carouselExampleCaptions" class="carousel slide container" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>

      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./2.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>Tang Ju Ya</h5>
            <p>愿你不舍昼夜，忠于自己。</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./3.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>YAN LING Tang</h5>
            <p>自由就是不再寻求认可</p>
          </div>
        </div>

        <div class="carousel-item">
            <img src="./4.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>JU YA  Tang</h5>
              <p>迷失的时候，选择最艰辛的那条路</p>
            </div>
          </div>

          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div></section>
      <header>
          <h1>糖桔丫的裤兜儿</h1>
      </header>
  <main>
    <head>
      <h2>了解糖桔</h2>
    </head>
    <main>
        <section class="bg">
            <h3 >糖桔丫简介</h3>
         <p>我叫唐燕玲，来自重庆<code>山城</code>，一名西北民族大学新闻传播学院广告狗。</p>
        <p>但乐观向上拥有梦想，性格活泼开朗，稳重成熟外表下，充溢细心踏实。</p>
        <p>你若咬定了人只活一次，便更没有随波逐流的理由。</p>
        </section> 
        <section class="ved">
            <h3>糖桔图片</h3>
            <img src="./media/ii.png" alt="唐燕玲" width="400">
            <img src="./4.jpg" alt="唐燕玲" width="400">
            <img src="./3.jpg" alt="唐燕玲" width="400">
        </section>
        <section class="ved">
            <h3>糖桔视频</h3>
            <video   src="./media/2020-03-11-204622239.mp4git" width="400" controls ></video>
        </section>

    
        <section >
          <h3>策划作品集</h3>  
           <div class="bg">
            <img src="./media/1yun.jpg"alt="广告设计" width="400">
            <img src="./media/1.jpg" alt="广告文字设计" width="400">
              </div></section>
              <section >
                <h3>平面作品集</h3>  
                 <div class="bg">
                  <img src="./media/3~1.jpg"alt="广告设计" width="400">
                  <img src="./media/蜡笔小新.jpg" alt="广告文字设计" width="400">
                  <img src="./media/11.jpg" alt="广告文字设计" width="400">
                  <img src="./media/x.png" alt="广告文字设计" width="400">
                    </div></section>
                    <section >
                      <h3>手绘作品集</h3>  
                       <div class="bg">
                        <img src="./media/6.jpg"alt="广告设计" width="400">
                        <img src="./media/1~1.jpg" alt="广告文字设计" width="400">
                        <img src="./media/2.jpg" alt="广告文字设计" width="400">
                          </div></section>     

      <form action="http://www.bing.com/search" method="get">
            <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
           </form>
    </main>
     
  </main>

  </body>
  <footer>欢迎浏览糖桔的小屋</footer> 
    <address>
     如有问题，请联系<a href="https://gitee.com/tangtyl/tangju.git">作者</a>.
    </address>
    <p><small>糖桔丫的小屋</small></p>
   </footer>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/esm/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </html>
  